<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>我的租借记录</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/homepage.css">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
    .searchbar{
        text-align: center;
    }
    .table-item{
        text-align: center;
    }
</style>
<body>
<div th:include="headbar::customer_headbar" style="margin-bottom:70px"></div>
<!--<div style="padding: 20px 550px 10px">-->
<div class="searchbar" >
    <!--   搜索框-->
    <form  class="form-inline"  id="searchForm">
        <div class="input-group">
            <input type="text" placeholder="通过日期搜索记录" class="form-control" name="searchWord" id="searchWord">
            <span class="input-group-btn">
                <input type="submit" value="搜索" class="btn btn-default" >
            </span>
        </div>
    </form>
</div>

<div class="panel panel-default" style="width: 90%;margin-left: 5%">
    <div class="panel-heading">
        <h3 class="panel-title" style="text-align:center">记录列表</h3>
    </div>
    <div class="panel-body">
        <table class="table table-hover" style="text-align:center">
            <thead>
            <tr>
                <th class="table-item">订单号</th>
                <th class="table-item">借出时间</th>
                <th class="table-item">归还时间</th>
                <th class="table-item">归还状态</th>
            </tr>
            </thead>
            <tbody>
            <tr  th:each="record: ${list}"  >
                <td th:text="${record.getBorrowRecordId()}" class="table-item"></td>
                <td th:text="${record.getBorrowDate()}" class="table-item"></td>
                <td th:text="${record.getReturnDate()}" class="table-item"></td>
                <td class="table-item" >
                    <!-- th:attr="carId=${car.carId}" //未还：0，已还：1-->
                    <button th:classappend="${record.getState() == 1 ? 'btn-success' : 'btn-info'}"
                            th:text="${record.getState() == 1 ? '已归还' :'未归还'}"
                            th:disabled="true">
                    </button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<script>
    //搜索
    $(document).ready(function() {

        const form = $('#searchForm');

        form.on('submit', function(e) {
            e.preventDefault();


            var searchWord = $('#searchWord').val();


            // 保存搜索关键词
            sessionStorage.setItem('searchWord', searchWord);


            $.ajax({
                url: '/cars/customer_record/query',
                method: 'post',
                data: {searchWord:searchWord  },
                dataType: "html",
                success: function(response)
                {
                    // $("html").html(response);
                    document.open();
                    document.write(response);
                    document.close();
                },
                error: function(xhr, status, error) {
                    alert('搜索失败！');
                }

            });
        });
    });
</script>

</body>
</html>